<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>课程详情|私教预约系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="yinqi" />
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"  rel="stylesheet"  type="text/css" >
</head>
<body>
<div class="whole">
    <div class="up">
        <img id="inputCoursePhoto" style="width: 400px;height: 300px;" alt="图片加载失败" >
        <div class="right">
            <span class="name" id="inputCourseName"></span>
            <span class="time" id="aaa">&ensp;</span>

            <div class="price_people">
                <div class="price1">类型：</div>
                <div class="price2" id="inputCourseType"></div>
            </div>

            <div class="price_people">
                <div class="price1">价格：</div>
                <div class="price2" id="inputCoursePrice"></div>
                <div class="price1">&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
                    &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
                    &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</div>
                <div class="price1">当前人数：</div>
                <div class="price2" id="inputCourseStudent"></div>

            </div>
            <div class="price_people">
                <div class="price1">课时：</div>
                <div class="price2" id="inputCourseHours"></div>
                <div class="price1">&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
                    &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
                    &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</div>
                <div class="price1">最大人数：</div>
                <div class="price2" id="inputCourseMaxStudent"></div>

            </div>
            <div class="price_people">
                <div class="price1">开课：</div>
                <div class="price2" id="inputCourseStartDate"></div>
                <div class="price1">&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
                    &ensp;&ensp;&ensp;&ensp;&ensp;
                    &ensp;&ensp;&ensp;&ensp;&ensp;</div>
                <div class="price1">结课：</div>
                <div class="price2" id="inputCourseEndDate"></div>

            </div>

            <div class="buttons">
                <button class="talk" onmouseover="overIt(this)" onmouseout="outIt(this)" onclick="buyThisCourse()">购买课程</button>
                <button class="talk" onmouseover="overIt(this)" onmouseout="outIt(this)" onclick="getTrainerInfo()">了解教练</button>
            </div>
        </div>
    </div>
    <div class="down">
        <div class="d_left">
            <div class="d_left_title">
                <div class="d_rightup" >
                    课程介绍
                </div>
            </div>
            <p class="d_left_main" id="inputCourseDescription">

            </p>
        </div>
        <div class="d_right">
            <div class="d_rightup">
                授课教练
            </div>
            <div class="d_rightdown">
                <img  alt="图片加载失败" class="teacher" id="inputTrainerImage">
                <div class="d_rightdr">
                    <div class="teachername" id="inputTrainerName">

                    </div>
                    <div class="teacherdetail" id="inputTrainerPhone">

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script src="../jquery/jquery-3.4.1.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">

    jQuery(document).ready(function(){

        let currentCourseId = $.cookie("currentCourseId");

        jQuery.post("/getCourseInfoById", {"courseId": currentCourseId}, function(rst) {

            // courseName, courseHours, courseType, trainerName, coursePrice, courseMaxStudents, courseStudents,
            // courseDescription, coursePhoto
            let imagePath = rst.coursePhoto;
            $("#inputCoursePhoto").attr('src', imagePath);

            $("#inputCourseName").text(rst.courseName);

            $("#inputCourseType").text(rst.courseType);

            $("#inputCoursePrice").text(rst.coursePrice);

            $("#inputCourseStudent").text(rst.courseStudents);

            $("#inputCourseHours").text(rst.courseHours);


            $("#inputCourseMaxStudent").text(rst.courseMaxStudents);

            $("#inputCourseStartDate").text(rst.courseStartTime);


            $("#inputCourseEndDate").text(rst.courseEndDate);

            $("#inputCourseDescription").text(rst.courseDescription);

            $("#inputTrainerImage").attr('src', rst.trainerImage);

            $("#inputTrainerName").text(rst.trainerName);

            $("#inputTrainerPhone").text(rst.trainerPhone);

            $.cookie('currentTrainerPhone', rst.trainerPhone);
            $.cookie('currentTrainerId', rst.trainerId);

        })
    });

    function buyThisCourse(){

        let userIdExit = document.cookie.indexOf("userid");
        if (userIdExit == -1)
        {
            alert("请先登录");
        }else{
            let currentUserId = $.cookie("userid");
            let currentCourseId = $.cookie("currentCourseId");
            jQuery.post("/selectCourse", {"userId" : currentUserId, "courseId": currentCourseId}, function (rst){
                alert(rst);
            })
        }
    }

    function getTrainerInfo(){

        window.location.replace("trainerDetails.html");
    }

    function overIt(obj){
        obj.style.opacity="0.8";
    }
    function outIt(obj){
        obj.style.opacity="1";
    }
</script>
</body>
</html>
<style type="text/css">
    .whole{
        height: 100%;
        /*width:100%;*/
        padding:10px 0;
    }
    .up{
        height: 380px;
        width: 80%;
        display: flex;
        flex-direction: row;
        background: white;
        padding-right: 20px;
        margin: 0 50px
    }
    .right{
        display: flex;
        flex-direction: column;
        margin-left:20px

    }
    .name{
        line-height: 31px;
        display: inline-block;
        width: 100%;
        font-family: 微软雅黑, "Microsoft YaHei";
        font-size: 24px;
        color: rgb(250,98,15);
        text-align: left;
        vertical-align: middle;
    }
    .time{
        font-family: "Arial", "Hiragino Sans GB", "Microsoft YaHei", \5fae\8f6f\96c5\9ed1, "Helvetica", "sans-serif";
        color: #999999;
        font-size: 14px;
        margin:10px 10px;
    }
    .price_people{
        background: #f8f9fb;
        height: 46px;
        width: 675px;
        display: flex;
        flex-direction: row;
        border-radius: 5px
    }
    .price1{
        color: darkslategrey;
        font-size: 12px;
        text-align: center;
        display: flex;
        align-items:center;
        margin:0 30px 0 10px;
    }
    .price2{
        color: rgb(250,98,15);
        font-size: 12px;
        font-weight: bold;
        font-size: 20px;
        display: flex;
        align-items:center;
    }
    .people{
        color: #999;
        font-size: 12px;
        text-align:center;
        display: flex;
        align-items:center;
        margin-left: 250px
    }
    .buttons{
        margin: 15px 20px;
        display: flex;
        justify-content: space-around;
    }
    .talk{
        position: relative;
        width: 250px;
        height: 52px;
        clear: none;
        background-color: orange;
        line-height: 52px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        float: left;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: white;
        font-family: 微软雅黑, 'Microsoft YaHei';
        font-size: 18px;
        border:0;
        cursor:pointer;
    }
    .down{
        background: #f5f5f5;
        width:100%;
        height: 300px;
        display: flex;
        flex-direction: row;
        padding: 10px
    }
    .d_left{
        width: 890px;
        height: auto;
        background: white;
        margin: 5px 50px;
        display: flex;
        flex-direction: column;
    }
    .d_right{
        width: 250px;
        height: 180px;
        background: white;
        padding: 5px 20px
    }
    .d_left_title{
        border-bottom: solid 1px #e6e6e6;
        margin-top:10px;
        padding: 0 10px;
    }
    .courseintro{
        color: #578BFF;
        border-bottom: 2px solid #578BFF;
        font: ;
        font-size: 18px;
        width:80px;
        padding: 10px 10px;
        text-align: center;
    }
    .d_left_main{
        padding: 5px 20px;
        font-size: 15px;
    }
    .d_rightup{
        margin: 30px 15px 30px 15px;
        height: 24px;
        border-style: solid;
        border-color: rgb(250,98,15);
        border-width: 0px 0px 0px 4px;
        padding-left: 18px;
        font-family: 微软雅黑, "Microsoft YaHei";
        font-size: 18px;
    }
    .teacher{
        width: 75px;
        height: 75px;
        border-radius: 50px;
        margin-right: 15px
    }
    .d_rightdown{
        display: flex;
        flex-direction: row;
    }
    .d_rightdr{
        display: flex;
        flex-direction: column;
    }
    .teachername{
        font-family: 微软雅黑, "Microsoft YaHei";
        font-size: 16px;
        color: rgb(51, 51, 51);
        text-align: left;
        margin: 5px 0
    }
    .teacherdetail{
        font-family: 微软雅黑, "Microsoft YaHei";
        font-size: 13px;
        color: rgb(153, 153, 153);
        text-align: left;
        margin: 5px 0
    }
</style>